<div class="p-3 bg-white"><h1 class="h3 m-0">Modal demo</h1></div>
<div class="p-3 relative"><h4 class='m-0 mb-3'>Modal sizes</h4>
  <div class="mb-3">
    <button class="btn btn-secondary rounded" data-toggle="modal" data-target="#m"
            onclick="$('#m').children().attr('class', 'modal-dialog')">Open me!
    </button>
    <button class="btn btn-secondary rounded" data-toggle="modal" data-target="#m"
            onclick="$('#m').children().attr('class', 'modal-dialog modal-lg')">Large modal
    </button>
    <button class="btn btn-secondary rounded" data-toggle="modal" data-target="#m"
            onclick="$('#m').children().attr('class', 'modal-dialog modal-sm')">Small modal
    </button>
  </div>
  <h4 class='m-0 mb-3'>Backdrop</h4>
  <div class="mb-3">
    <button class="btn btn-secondary rounded" data-toggle="modal" data-target="#mm">Without</button>
    <button class="btn btn-secondary rounded" data-toggle="modal" data-target="#m"
            onclick="$('#m').prop('data-backdrop', true)">Default grey backdrop
    </button>
    <button class="btn btn-secondary rounded" data-toggle="modal" data-target="#m"
            onclick="$('#m').attr('class', 'modal white-overlay')">White backdrop
    </button>
    <button class="btn btn-secondary rounded" data-toggle="modal" data-target="#m"
            onclick="$('#m').attr('class', 'modal black-overlay')">Dark backdrop
    </button>
    <button class="btn btn-secondary rounded" data-toggle="modal" data-target="#m"
            onclick="$('#m').attr('class', 'modal fade')">Fade Animation
    </button>
  </div>

  <div class="modal modal-inline">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">Modal title</h3>
          <button type="button" class="close">×</button>
        </div>
        <div class="modal-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
          laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary rounded mr-2 px-3" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-outline-primary rounded px-3">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <div id="m" class="modal" data-backdrop="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">Modal title</h3>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <div class="modal-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
          laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary rounded px-3" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-outline-primary rounded px-3" data-dismiss="modal">Save changes</button>
        </div>
      </div>
    </div>
  </div>


  <div id="mm" class="modal" data-backdrop="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">Modal title</h3>
          <button type="button" class="close" data-dismiss="modal">×</button>
        </div>
        <div class="modal-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
          labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
          laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary rounded mr-2 px-3" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-outline-primary rounded px-3" data-dismiss="modal">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>